<!-- 组合式 -->
<script setup>
import { ref, reactive, onMounted, watch } from "vue";

import { ElMessage, ElMessageBox } from "element-plus";
import util from "@/utils/util";

import { useConfigStore } from "@/stores";

// 参数接收
const props = defineProps({
  msg: {
    type: String,
    default: "msg",
  },
});
const modelType = defineModel("type");

// 参数
const pages = reactive({
  checked: false,

  sfType: [
    {
      deptName: "学生",
      deptId: 1,
    },
    {
      deptName: "老师",
      deptId: 2,
    },
  ],

  schoolDept: [],
  xyDept: [],

  zyType: useConfigStore().config.zy_type,

  formData: {
    sfType: "",
    userName: "",
    password: "",
    schoolId: "",
    deptId: "",
    zyType: "",
    phonenumber: "",
    nickName: "",
    studyNo: "",
  },

  rules: {
    userName: [
      {
        required: true,
        message: "请输入账号",
        trigger: "blur",
      },
    ],
    password: [
      {
        required: true,
        message: "请输入密码",
        trigger: "blur",
      },
    ],
    nickName: [
      {
        required: true,
        message: "请选择姓名",
        trigger: "blur",
      },
    ],
    phonenumber: [
      {
        required: true,
        message: "请输入手机号码",
        trigger: "blur",
      },
    ],
    // studyNo: [{
    // 	required: true,
    // 	message: '请输入学号',
    // 	trigger: 'blur'
    // }],
  },
});
const formRef = ref();
const visible = ref(false);
const visibleText = ref("");
const visibleTitle = ref("");

// 身份
watch(
  () => pages.formData.sfType,
  (n) => {
    if (n == 1) {
      pages.rules.studyNo = [
        {
          required: true,
          message: "请输入学号",
          trigger: "blur",
        },
      ];
    } else {
      delete pages.rules.studyNo;
    }
  }
);

// 学校发生变化
watch(
  () => pages.formData.schoolId,
  async (parentId) => {
    // 清空系
    if (!parentId) {
      pages.xyDept = [];
      pages.formData.deptId = "";
      return;
    }
  }
);

// 挂载
onMounted(() => {
  init();
});

// 初始化
async function init() {
  util.showLoading();
  util.hideLoading();
}

// 协议
async function changeOpen(type) {
  const res = await api.user.twxxlist(type);
  visibleTitle.value = type == 1 ? "注册协议" : "隐私政策";
  visibleText.value = res[0].content;
  visible.value = true;
}

// 注册
function changeSave() {
  if (!pages.checked)
    return ElMessage({
      message: "请查看《注册协议》和《隐私政策》",
      type: "warning",
    });

  // 拦截验证
  formRef.value.validate(async (valid) => {
    if (!valid) return;

    // const res = await api.user.register(pages.formData);
    // if (!res) return;

    ElMessageBox.alert("提交注册审核成功！", "系统通知", {
      // autofocus: false,
      confirmButtonText: "我知道了",
      callback: (action) => {
        console.log(action);
      },
    });

    modelType.value = 1;
    // emit('save', pages.formData)
  });
}

// 暴露
defineExpose({});

// 回调
const emit = defineEmits(["change", "save"]);
</script>

<template>
  <div class="HomeView-form">
    <div style="width: 100%">
      <p class="title">注册</p>
      <p class="biao"></p>
    </div>

    <!--  -->
    <el-form
      ref="formRef"
      :model="pages.formData"
      :rules="pages.rules"
      style="width: 100%; margin-top: 30px"
      label-position="top"
    >
      <!-- 选择身份： -->
      <el-form-item label="选择身份：" prop="sfType">
        <el-select
          v-model="pages.formData.sfType"
          placeholder="请选择身份"
          clearable
          :style="{ width: '100%' }"
        >
          <el-option
            v-for="item in pages.sfType"
            :key="item.deptId"
            :label="item.deptName"
            :value="item.deptId"
          />
        </el-select>
      </el-form-item>

      <!-- 账号： -->
      <el-form-item label="账号：" prop="userName">
        <el-input
          type="text"
          maxlength="11"
          v-model="pages.formData.userName"
          placeholder="请输入账号"
          clearable
          :style="{ width: '100%' }"
        />
      </el-form-item>

      <!-- 密码： -->
      <el-form-item label="密码：" prop="password">
        <el-input
          show-password
          type="text"
          v-model="pages.formData.password"
          placeholder="请输入密码"
          clearable
          :style="{ width: '100%' }"
        />
      </el-form-item>

      <!-- 姓名 -->
      <el-form-item label="姓名：" prop="nickName">
        <el-input
          type="text"
          v-model="pages.formData.nickName"
          placeholder="请输入姓名"
          clearable
          :style="{ width: '100%' }"
        />
      </el-form-item>

      <!-- 手机号码： -->
      <el-form-item label="手机号码：" prop="phonenumber">
        <el-input
          type="text"
          maxlength="11"
          v-model="pages.formData.phonenumber"
          placeholder="请输入手机号码"
          clearable
          :style="{ width: '100%' }"
        />
      </el-form-item>

      <!-- 学号： -->
      <el-form-item
        label="学号："
        prop="studyNo"
        v-if="pages.formData.sfType == 1"
      >
        <el-input
          type="text"
          v-model="pages.formData.studyNo"
          placeholder="请输入学号"
          clearable
          :style="{ width: '100%' }"
        />
      </el-form-item>
    </el-form>

    <!-- 注册 -->
    <l-button value="注册" @change="changeSave" />

    <!-- / 注册 -->
    <el-link style="margin-top: 10px" @click="modelType = 1">去登录</el-link>

    <!-- xieyi -->
    <p class="xieyi">
      <el-checkbox v-model="pages.checked"
        >同意<text @click.stop="changeOpen(1)">《注册协议》</text>和<text
          @click.stop="changeOpen(2)"
          >《隐私政策》</text
        ></el-checkbox
      >
    </p>
  </div>
</template>

<style lang="scss">
.HomeView-form {
  .el-form-item__label {
    font-size: 14px;
    color: #999999;
  }
}
</style>
<style lang="scss" scoped>
.HomeView-form {
  max-height: 80vh;
  overflow: scroll;

  margin-left: 126px;
  margin-right: 75px;
  padding: 20px 70px 20px 70px;
  background: #ffffff;
  border-radius: 5px;

  display: flex;
  flex-direction: column;
  align-items: center;

  .title {
    font-weight: bold;
    font-size: 28px;
    color: #333333;
  }

  .biao {
    margin-top: 10px;
    width: 60px;
    height: 4px;
    background: #5775ef;
    border-radius: 6px 6px 6px 6px;
  }

  .l-button {
    margin-top: 10px;
    width: 100%;
  }

  .xieyi {
    margin-top: 10px;
    font-size: 16px;
    color: #333333;

    text {
      color: #5775ef;
      cursor: pointer;
    }
  }
}

.my-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
